<template>
  <RouterLink to="" class="goods-item">
    <img
      src="" 
      alt=""
      v-lazy="it.picture"
    />
    <p class="name ellipsis">{{it.name}}</p>
    <p class="desc ellipsis">{{it.desc}}</p>
    <p class="price">&yen;{{it.price}}</p>
  </RouterLink>
</template>
<script>
export default {
  props:['it']
}
</script>
<style scoped lang="scss">
@import "@/assets/css/components.scss";
.goods-item {
  display: block;
  width: 220px;
  padding: 20px 30px;
  text-align: center;
   @include hoverShadow();
  img {
    width: 160px;
    height: 160px;
  }
  p {
    padding-top: 10px;
  }
  .name {
    font-size: 16px;
  }
  .desc {
    color: #999;
    height: 29px;
  }
  .price {
    color: red;
    font-size: 20px;
  }
}
</style>
